<template>
  <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="180px" style="width:750px;
    margin:20px auto;background-color: white;padding:20px 50px;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);">
    <h2 style="margin-top:0">企业信息修改</h2>
    <h2 class="user-info">企业基本信息</h2>
    <el-form-item label="企业类型" prop="kind" style="text-align:left">
      <el-radio v-model="ruleForm.kind" label="供应商">供应商</el-radio>
      <el-radio v-model="ruleForm.kind" label="客户">客户</el-radio>
    </el-form-item>
    <el-form-item label="企业名称" prop="companyName">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.companyName" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="注册地区" prop="comRegisterArea">
      <el-input :disabled="ruleForm.disabled" type="textarea"  :rows="2"  placeholder="请输入注册地区，格式:xx省xx市xx区(县)+详细地址"  v-model="ruleForm.comRegisterArea"
      style="width:300px;display:block">
    </el-input>
    </el-form-item>
    <el-form-item label="邮政编码" prop="comPostalCode">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.comPostalCode" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="企业联系电话" prop="comPhoneNum">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.comPhoneNum" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="传真" prop="fax">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.fax" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="法人代表" prop="legalPersonName">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.legalPersonName" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="法人代表身份证" prop="legalIDCard">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.legalIDCard" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="企业简介" prop="companyProfile">
        <el-input :disabled="ruleForm.disabled" type="textarea"  :rows="3"  placeholder="不超过256个字"  v-model="ruleForm.companyProfile"></el-input>
    </el-form-item>
    <el-form-item label="开户银行" prop="bankName">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.bankName" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="银行账号" prop="bankAccount">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.bankAccount" style="width:300px;display:block"></el-input>
    </el-form-item>
    <el-form-item label="统一社会信用代码" prop="USCC">
      <el-input :disabled="ruleForm.disabled" v-model="ruleForm.USCC" style="width:300px;display:block"></el-input>
    </el-form-item>
    <h2 class="user-info">企业资质</h2>
    <el-form-item label="法人代表身份证正面照" prop="legalIDCardFrontFile" style="text-align:left">
        <el-upload
            class="upload-demo"
            ref="load1"
            :action="''"
            :limit="1"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
            :auto-upload="false"
            :on-change="loadImg1">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" style="margin-top:0px;color:rgb(159,159,159)">只能上传jpg/png文件，且不超过1mb</div>
        </el-upload>
    </el-form-item>
    <el-form-item label="法人代表身份证背面照" prop="legalIDCardBackFile" style="text-align:left">
        <el-upload
            class="upload-demo"
            :action="''"
            :limit="1"
            :before-remove="beforeRemove"
            :file-list="fileList"
            :on-remove="handleRemove"
            :auto-upload="false"
            :on-change="loadImg2"
            ref="load2">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" style="margin-top:0px;color:rgb(159,159,159)">只能上传jpg/png文件，且不超过1mb</div>
        </el-upload>
    </el-form-item>
    <el-form-item label="统一社会信用代码照" prop="USCC" style="text-align:left">
        <el-upload
            class="upload-demo"
            :action="''"
            :limit="1"
            :before-remove="beforeRemove"
            :on-remove="handleRemove"
            :auto-upload="false"
            :on-change="loadImg3"
            ref="load3">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip" style="margin-top:0px;color:rgb(159,159,159)">只能上传jpg/png文件，且不超过1mb</div>
        </el-upload>
    </el-form-item>

    <el-form-item style="text-align:left">
      <el-button @click="upload('ruleForm')" type="primary" >提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
</el-form>
</template>
<style>
  .user-info{
    color: #00a1ff;
    border-bottom: 1px solid #1e95ce;
    text-align: left;
    font-size: 16px;
    padding: 6px 0px;
  }
</style>
<script>
  export default {
    data() {
      return {
        ruleForm: {
            kind:'',
            companyName:'',
            comRegisterArea:'',
            comPostalCode:'',
            comPhoneNum:'',
            fax:'',
            legalPersonName:'',
            legalIDCard:'',
            companyProfile:'',
            bankName:'',
            bankAccount:'',
            USCC:'',
            status:'',
            disabled:''
        },
        file:{
            file1:'',
            file2:'',
            file3:'',
        },
        rules: {
          kind: [
            { required: true, message: '请选择企业类型', trigger: 'change' }
          ],
          companyName: [
            { required: true, message: '请输入企业名称', trigger: 'blur' }
          ],
          comRegisterArea: [
            { required: true, message: '请输入注册地区', trigger: 'blur' } 
          ],
          comPostalCode: [
            { required: true, message: '请输入邮政编码', trigger: 'blur' },
            { min: 6, max: 6, message: '邮政编码有误', trigger: 'blur' }
          ],
          legalPersonName: [
            { required: true, message: '请输入法人代表名', trigger: 'blur' },
            { min: 2, max: 10, message: '输入有误', trigger: 'blur' }
          ],
          legalIDCard: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' },
            { min: 18, max: 18, message: '身份证有误', trigger: 'blur' }
          ],
          userPhoneNum: [
            { required: true, message: '请输入手机联系电话', trigger: 'blur' },
            { min:11, max: 11, message: '手机联系电话有误', trigger: 'blur' }
          ],
          companyProfile: [
            { required: true, message: '请填写企业简介', trigger: 'blur' },
            { min:1, max: 256, message: '超过256个字符', trigger: 'blur' }
          ],
          bankName:[
            { required: true, message: '请填写开户银行', trigger: 'blur' }
          ],
          bankAccount:[
            { required: true, message: '请填写银行账号', trigger: 'blur' }
          ],
          USCC:[
            { required: true, message: '请填写统一社会信用代码', trigger: 'blur' }
          ]
        }
      };
    },
    mounted(){
        this.GetInfo()
    },
    methods: {
        GetInfo(){
          const that=this;
            this.$axios({
            url:'/Test/user/getComInfo.do',
            method: 'post',
            processData: false,
            contentType: false,
            }).then((res)=>{
                console.log(res)
                that.ruleForm.status=res.data.status
                that.ruleForm.kind=res.data.kind
                that.ruleForm.companyName=res.data.companyName
                that.ruleForm.comRegisterArea=res.data.comRegisterArea
                that.ruleForm.comPostalCode=res.data.comPostalCode
                that.ruleForm.comPhoneNum=res.data.comPhoneNum
                that.ruleForm.fax=res.data.fax
                that.ruleForm.legalPersonName=res.data.legalPersonName
                that.ruleForm.legalIDCard=res.data.legalIDCard
                that.ruleForm.companyProfile=res.data.companyProfile
                that.ruleForm.bankName=res.data.bankName
                that.ruleForm.bankAccount=res.data.bankAccount
                that.ruleForm.USCC=res.data.uscc
                console.log(res.data.uscc)
                if(that.ruleForm.status==0){
                  that.ruleForm.disabled=true;
                }
                else{
                  that.ruleForm.disabled=false
                }
            });
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
            if (valid) {
                alert('submit!');
            } else {
                console.log('error submit!!');
                return false;
            }
            });
         },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        beforeAvatarUpload(file){
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        upload(formName){
            this.$refs[formName].validate((valid) => {
              if (valid) {
               
              } else {
                console.log(formName);
                console.log('error submit!!');
                return false;
              }
            });
            if(this.file.file1==''||this.file.file3==''||this.file.file2=='')
            {
                console.log("文件未上传");
                this.$message({
                    type: 'info',
                    message: '未选择文件或文件上传错误!'
                });
                return false;
            }
            var formData = new FormData();
            var type1 = this.file.file1.name.split('.');
            var type2 = this.file.file2.name.split('.');
            var type3 = this.file.file3.name.split('.');
            var renameFile1 =new File([this.file.file1], 'legalIDCardFrontFile'+'.'+type1[1] ,{type:this.file.file1.type});
            var renameFile2 =new File([this.file.file2], "legalIDCardBackFile"+'.'+type2[1]  ,{type:this.file.file1.type});
            var renameFile3 =new File([this.file.file3], "USCCFile" +'.'+type3[1],{type:this.file.file1.type});

            formData.append("files", renameFile1); 
            formData.append("files", renameFile2);
            formData.append("files", renameFile3);
            formData.append('kind',this.ruleForm.kind);
            formData.append('companyName',this.ruleForm.companyName);
            formData.append('comRegisterArea',this.ruleForm.comRegisterArea);
            formData.append('comPostalCode',this.ruleForm.comPostalCode);
            formData.append('comPhoneNum',this.ruleForm.comPhoneNum);
            formData.append('fax',this.ruleForm.fax);
            formData.append('legalPersonName',this.ruleForm.legalPersonName);
            formData.append('legalIDCard',this.ruleForm.legalIDCard);
            formData.append('companyProfile',this.ruleForm.companyProfile);
            formData.append('bankName',this.ruleForm.bankName);
            formData.append('bankAccount',this.ruleForm.bankAccount);
            formData.append('USCC',this.ruleForm.USCC);
            for (var [a, b] of formData.entries()) {
                console.log(a, b);
            }
            if(this.ruleForm.status!=0){
              this.$axios({
                url:'/Test/user/updateCom.do',
                method: 'post',
                data: formData,
                processData: false,
                contentType: false,
                }).then((res)=>{
                  console.log(res)
              });
              const that=this;
              this.$alert("绑定成功",{
                confirmButtonText: '确定',
                  callback: action => {
                    that.$router.push({path:'/index'});
                }
              });
            }
            else{
              this.$message({
                message:'正在审核中，无法提交'
              })
            }
        },
        loadImg1(file){
            const isJPG = file.raw.type === 'image/jpeg'
            const isPNG = file.raw.type === 'image/png'
            const isLt2M = file.raw.size / 1024 / 1024 < 0.5
            if (!isPNG && !isJPG) {
                this.$message({
                    message: '文件格式错误',
                    type: 'error',
                    duration: 2000
                })
                return false
            } else if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 200kb!')
                return false
            }
            console.log(file);
            this.file.file1=file.raw;
        },
        loadImg2(file){
            const isJPG = file.raw.type === 'image/jpeg'
            const isPNG = file.raw.type === 'image/png'
            const isLt2M = file.raw.size / 1024 / 1024 < 0.5
            if (!isPNG && !isJPG) {
                this.$message({
                    message: '文件格式错误',
                    type: 'error',
                    duration: 2000
                })
                return false
            } else if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 200kb!')
                return false
            }
            console.log(file);
            this.file.file2=file.raw;
        },
        loadImg3(file){
            const isJPG = file.raw.type === 'image/jpeg'
            const isPNG = file.raw.type === 'image/png'
            const isLt2M = file.raw.size / 1024 / 1024 < 0.5
            if (!isPNG && !isJPG) {
                this.$message({
                    message: '文件格式错误',
                    type: 'error',
                    duration: 2000
                })
                return false
            } else if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 200kb!')
                return false
            }
            console.log(file);
            this.file.file3=file.raw;
        }
    }
  }
</script>